1. Guidance

Visualization

Toshiyuki Masui

Keio University

masui@pitecan.com

September 26, 2019

Scrapbox

Information sharing system (Wiki)

Useful for various tasks

Make full use of it during the lecture

https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png

Scrapbox

Share information on the Web

Manage information on the Web

A better Wiki

Scrapbox info

/help

/UIPedia

/nota-press/Scrapbox紹介記事

Using Scrapbox

Google account required

= GMail address

Keio.jp account (G Suite account) is also fine

Creating a Scrapbox project

Create a project sfc-vis2019-CNSaccount

e.g.

Use your project page for everything

Who am I ?

Worked at Sharp, Sony, AIST, etc.

Developer of POBox, a prediction-based Japanese text input system for mobile phones

Worked at Apple until 2008 fall

Developed "flick-based" Japanese textinput system

Working at Keio since 2009

Doing research on on user interface systems

Running various Web services

Gyazo (Desktop screen capture)

Scrapbox (Wiki)

hondana.org (Bookshelf)

Many papers, magazine articles, Web articles

POBox

https://gyazo.com/ac2b347a7042f920edd576ee07c4b7f4.png

"Flick" interface for Japanese text input

https://i.gyazo.com/1691febad27439d3bf44232c54dcb1e8.png

Paperback

「Are you satisfied with smart phones? - Psychology of user interface」

from Kobunsha publishing

Published on Feb. 17, 2015

https://Gyazo.com/64c56d9c3e67745e95bc038487d09c98.png

Hype

"Everybody is cheated by Steb Jobs"

https://i.Gyazo.com/bf3bc7510fdb74c8db4bb058fd3ed6d6.png

Other publications

http://hondana.org/%E5%A2%97%E4%BA%95/4756102816 https://i.Gyazo.com/4f415439da4a838af43a73bf8325df55.png

http://hondana.org/%E5%A2%97%E4%BA%95/4756146627 https://Gyazo.com/d7e6378a56a03c4c183185b475feeacc.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873113784 https://i.Gyazo.com/b5d8dcb8b3161e03a4ba6bf83ab3bbd8.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873114616 https://Gyazo.com/e6137ea90f398f83394f44435eab97f0.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873114861 https://Gyazo.com/715cc3421c8b50897f8afa7efa38ee0f.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873115043 https://Gyazo.com/027dca09083cb76869c874bcdcb01dd9.png

"Columbus days"

技術評論社「Software Design」

https://gihyo.jp/dev/serial/01/masui-columbus https://gyazo.com/c2df1e93677b155229ea17bec0e7864d.png

Research topics

Information Retrieval

Information Visualization

Predictive interface

Text entry

Communication systems

Ubiquitous computing

Authentication methods

Web

http://pitecan.com/

Search Google with "Toshiyuki Masui"

Other lectures

User interface design methods

Modern Web platforms

Programming methodologies

Whole-world interface design

Video: Real-world copy/paste

https://www.youtube.com/watch?v=1di7_2J8X0Y

EpisoPass

http://episopass.com/EpisoDAS.html?name=Facebook_masui https://gyazo.com/98469a496a306eced38983f93c54e44e

Masui laboratory

Ubiquitous computing

User interface software and hardware

Web services

Friends in various IT fields

Universities

Researchers

Startup people

Web businesses

Example: Gyazo

https://Gyazo.com/12f732583b5ea7e5b440baa3f2ddd5b4.png

Alexa data (2017/9/25)

https://gyazo.com/d01f9f57afb7dd413faed2edc0a1d6b8

Funding from VC

https://gyazo.com/a99458e321aa5be81557b3387150b464.png

Syllabus

While people can handle terabytes of data on their PCs and access petabytes of data on the Web, techniques for handling large amounts of data is becomming extremely important. Computer-based visualization techniques are promising for understanding and preseneting large amount of data, and new interesting techniques are emerging.

Static visualization techniques have been used everywhere for a very long time on walls, posters, books, etc. In the age of modern computers, various dynamic and interactive visualization techniques are now available and people can navigate through huge information space interactively using effective interactive search systems and navigation systems, based heavily on modern visualization techniques and data analysys techniques.<br>In this lecture, we introduce various visualization techniques, tools, and algorithms for handling huge amount of data available today, with many real-world examples.

Evaluation

Task report submission (maybe twice)

Visualization programming exercises

Various visualization systems

Infographics

Scientific visualization

Information visualization

Various visualization systems

Infographics

Scientific visualization

Information visualization

Infographics

Display data beautifully on a 2D space

Handled by designers

Have been popular for a long time

Infographics

https://gyazo.com/9c0fde929d3da8e3356a748899695827.png

https://www.pinterest.jp/masui/visualization-ideas/

Infographics of New York metro

https://Gyazo.com/3e9d348ee49815ab8d462ee2254d921d.png

Napoleon's invasion to Moscow

https://Gyazo.com/19e5355ce8962b40eb9d7ebccc96dc46.png

Scientific visualization

Show real-world data and simulation results in 3D

Used in various scientific community

Scientific visualization example

https://Gyazo.com/456260ff7c9681525f41b2dc209ca6fb.png

Scientific visualization example

https://i.Gyazo.com/d8a770c4cd912fb8523ab2a0be0d0462.png

Scientific visualization example

Finite Element Method

https://Gyazo.com/aa1d5e522d2cdfe2cabc7abff629731a.png

Scientific visualization example

Zinc and hydrogen molecule

https://Gyazo.com/1ae719bf0c4eb8607f1cb9b385dbad92.png

AVS

Scientific visualization software

https://i.Gyazo.com/efcda5f12538b36633541455aa4ea0b4.png

Information visualization

Technologies for showing huge data

Not directly linked to real-world objects

Characteristics of information visualization

Treat data with no shape

File systems, network structure, ...

Arbitrary visualization methods

Interactive information retrieval

"Smooth" interaction

No direct mapping to real-world

https://Gyazo.com/f3d16cebda8feb6a361814437b1ef45b.png

Poincaré disc (non-Euclidean geometry)Non-realistic mapping

Poincaré disc (non-Euclidean geometry)

https://Gyazo.com/3bda390fc464a13e207fd7a6d0571ef7.png

Representing infinity

https://Gyazo.com/dd6315efbef37720b282b507d5499071.png

HyperbolicTree

https://www.youtube.com/watch?v=pwpze3RF55o

https://i.Gyazo.com/031ecbe3d8afed0d00338b871ce6bf4b.png

Demo: TreeVis

https://Gyazo.com/c233444d864cb09b2cdd02d60213caa2.png

Flight animation by Aaron Koblin

http://www.youtube.com/v/ystkKXzt9Wk https://Gyazo.com/7212ae31d9f27ad2cfce177010d0b5ee.png

Why do we need information visualization?

Information retrieval

Data mining

Programming

Debugging

Art

Everyday IV around us

Icons

Windows

Folders

What do we want to visualize?

Network structure

URL links

SNS relations

Social filtering info

Data on computers

File system structure

Log information

Network traffic

What do we want to visualize?

Biological data

Genes

Protein molecule

Ideas (e.g. Mindmap)

Historical timeline

Art

What do we want to visualize?

Large stuff

The whole Web, SNS

Small stuff

Sparkline

https://Gyazo.com/a1f02c17133e2035a75e67420a4bb6cf.png

Techniques for information visualization

Filtering methods

Layout methods

Interaction methods

Filtering methods

Condition matching

Zooming in / out

Calculating importance

Mapping to screen

Representations

Shapes, colors, textures, ...

Layout

Distortion

Animation

Interaction methods

Dragging / zooming

Dynamic filtering

Dynamic manipulation

History of information visualization

Research on PARC, Maryland Univ, etc. (1980s)

Various methods invented and proposed

InfoVis conference

Not very active recently

Ben Shneiderman

University of Maryland

https://i.Gyazo.com/23a7bab8adfcf991a4df9bf69d0b1711.png

Stuart Card

Xerox PARC

https://Gyazo.com/7466a651e0d3c76f35977e860761ca7f.png

Current trends

No new novel method invented

Old methods became popular

TreeMap, Sunburst

Visualization for specific areas

Finance, bio, etc.

Generic tools never succeeded

Many JS tools

Tableau

TreeMap

Invented by Ben Shneiderman

Visualize a large tree structure on a 2D space

Repeatedly divide a rectangle horizontally/vertically

http://gyazo.com/fa6230caf2187871465007f290065c60.png

Sunburst

Invented by John Stasko

https://gyazo.com/d1e8e18568564a57170ac2fa6f2a1b29

Technical trends

Fast graphics on PCs

Modern Web browsers

JavaScript, HTML5

Server / browser cooperation

'Big data' on the net

Good visualization libraries

Drawing libraries

Layout libraries

Statistical computing

General moods of IV

No novel basic technique

TreeMap, spring-based model, force-directed

No interesting research topics

Old IV researchers are not working for IV

Maybe bored?

AaronMarcus article

Business chances somewhere

General trends

Artists / designers / manias

"IV by programmers are terrible"

Difficult to write papers

Based on simple idea or re-invention

Jock Mackinley was always saying that he already tried this and that

General trends

People see various IV systems on the Web

Fancy systems everywhere

Many good tools available

IV libraries for programmers

IV system for buisiness people

Processing

https://processing.org/ https://gyazo.com/7e4eee10238f6b73f6d0006e03a9c5b1

Simple IV environment for by Ben Fry

Extension to Java

Useful for IV

Ben Fry @ MIT

https://Gyazo.com/4b14e7234b823d503091bf4f158af271.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873113784 https://i.Gyazo.com/b5d8dcb8b3161e03a4ba6bf83ab3bbd8.png

P5.js

Examples

https://p5js.org/examples/simulate-particle-system.html https://gyazo.com/dc35c16d9d72708a3500035661777339.png

Using P5.js on Scrapbox

/prog-exercises

https://gyazo.com/f3c1bfc01bde8b4a62a1794c6d065699

D3.js

http://d3js.org/ https://Gyazo.com/fa0d9ef1261fdc47f963d4196de24935.png

Future trends

Systems get popular if they are available to everybody

e.g. VisiCalc, Web

Some systems get popular after years of research

Information Retrieval, AR, etc.

Lecture schedule

Basic visualization techniques

Visualization of hierarchical data

Visualization of network data

Visualization of table data

Visualization of timelines

Lecture schedule

Information retrieval and invormation visualization

Visualization and GUI

Web and visualization

Visual programming

Visualization and animation

Visualization and society

Basic visualization techniques

Know-hows of posters and signboards

Books on information design

3D display, zooming, distortion, filtering

Interactive techniques

Visualization of hierarchical data

Many large data are hierarchically structured

File systems

Yahoo! directory

Dictionaries

...

Introucing various techniques for visualizing hiearchical data

Visualization of network data

Web data are not hierarchical

Huge data linked together

Files should sometimes be managed as linked data

e.g. A photo sent from a friend

Which folder is appropriate

Introducing various techniques for visualizing network data

Visualization of table data

Large data of table-based data

Bookshelves / books

Users / communities

RDB

Spreadsheets

Introducing techniques for visualizing large table data

Visualization of timelines

Visualization of changing data